<template>

  <!---搜索表单-->
  <div class="search-div">
    <el-form label-width="70px" size="small">
      <el-row>
        <el-col :span="8">
          <el-form-item label="模块名称">
            <el-input v-model ="SysOperLogDto.title"
                      style="width: 90%"
                      placeholder="模块名称"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="用户名">
            <el-input v-model ="SysOperLogDto.operName"
                      style="width: 90%"
                      placeholder="用户名"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="创建时间">
            <el-date-picker v-model="createTimes"
                            type="daterange"
                            range-separator="To"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间"
                            format="YYYY-MM-DD"
                            value-format="YYYY-MM-DD"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row style="display:flex">
        <el-button type="primary" size="small" @click="search">搜索</el-button>
        <el-button size="small" @click="reset">重置</el-button>
      </el-row>
    </el-form>
  </div>

  <!--表格数据-->
  <div class="table-div">
    <el-table :data="list" style="width: 100%">
      <el-table-column prop="title" label="模块标题"  />
      <el-table-column prop="method" label="方法名称"  />
      <el-table-column prop="requestMethod" label="请求方式" />
      <el-table-column prop="businessTypeText" label="业务类型" />
      <el-table-column prop="operatorTypeText" label="操作类别" />
      <el-table-column prop="operatorTypeText" label="操作类别" />
      <el-table-column prop="operName" label="操作人员" />
      <el-table-column prop="operUrl" label="请求URL" />
      <el-table-column prop="operIp" label="主机地址" />
      <el-table-column prop="operParam" label="请求参数" />
      <el-table-column prop="jsonResult" label="返回参数">
<!--        超过15个字符显示省略号，小于15个字符不显示省略号-->
      <template #default="scope">
        <el-tooltip
            :content="scope.row.jsonResult"
            raw-content
            placement="top-start"
            v-if="scope.row.jsonResult"
        >
          <span v-if="scope.row.jsonResult && scope.row.jsonResult.length <= 15">
               {{scope.row.jsonResult}}
          </span>
          <span v-if="scope.row.jsonResult&& scope.row.jsonResult.length > 15">
               {{scope.row.jsonResult.substr(0, 15) + "..."}}
          </span>
        </el-tooltip>
        <span v-else-if="scope.row.jsonResult== null"> NA </span>
      </template>
      </el-table-column>

      <el-table-column prop="statusText" label="操作状态" />
      <el-table-column prop="errorMsg" label="错误消息" />
      <el-table-column prop="createTime" label="创建时间" />
      <el-table-column prop="updateTime" label="修改时间" />
    </el-table>
  </div>
<!--分页-->
  <el-pagination
      v-model:current-page="SysOperLogDto.pageNum"
      v-model:page-size="SysOperLogDto.pageSize"
      :page-sizes="[5, 10, 20]"
      @size-change="getfindAllSysOperLog"
      @current-change="getfindAllSysOperLog"
      layout="total, sizes, prev, pager, next"
      :total="total"
  />



</template>

<script setup>
import { ref, computed,watch,onMounted } from 'vue';
import {findAllSysOperLog } from '@/api/system/sys-oper-log';
import { ElMessage, ElMessageBox } from "element-plus";


onMounted(() => {
  getfindAllSysOperLog();
});
// 表格数据模型
const list = ref([]);
// 分页条数据模型
const total = ref(0)

//搜索数据模型
const SysOperLogDto = ref({
  title:"",
  operName:"",
  createTimeBegin: "",
  createTimeEnd: "",
  pageNum: 1,
  pageSize: 10

});

const createTimes = ref([])

//获取分页查询用户列表数据
const getfindAllSysOperLog = async () => {
  if (createTimes.value.length > 0){
    SysOperLogDto.value.createTimeBegin = createTimes.value[0]
    SysOperLogDto.value.createTimeEnd = createTimes.value[1]
  }
  const {data,code} = await findAllSysOperLog(SysOperLogDto.value);
  list.value = data.records;
  total.value = data.total;
}

</script>

<style scoped>

</style>